<template>
    <div class="">
        <div v-if="showHeader" class="text-base component-title">
            <!-- <img class="w-[24px] h-[24px]" :src="Icon" /> -->
            <div>{{ title }}</div>
        </div>
        <el-select v-model="value" :placeholder="placeholder" class="w-full mt-[10px]">
            <template v-if="isGroup">

                <el-option-group v-for="group in modelList" :key="group.label" :label="group.label">
                    <el-option class="groupOption" v-for="item in group.options" :key="item.value" :label="item.label"
                        :value="item.value" />
                </el-option-group>
            </template>
            <template v-else>
                <el-option v-for="(item) in modelList" :key="item.label" :label="item.label" :value="item.label" />
            </template>


        </el-select>
    </div>
</template>

<script setup lang="ts">
import { useVModels } from '@vueuse/core'
import Icon from '@/assets/images/drawing/icon_prompt.png'
const emit = defineEmits<{
    (event: 'update:modelValue', value: string): void
}>()
const props = withDefaults(
    defineProps<{
        modelList?: any,
        modelValue?: any,
        title?: string,
        showHeader?: boolean,
        placeholder?: string,
        isGroup?: boolean,
    }>(),
    {
        modelList: [],
        modelValue: '',
        title: '',
        showHeader: true,
        isGroup: false,
        placeholder: '',
    }
)
const { modelValue: value } = useVModels(props, emit)

// watchEffect(() => {
//     const modelList = props.modelList
//     if (modelList.length !== 0) {
//         value.value = modelList[0].model_name
//     }
// })
</script>

<style scoped>
.style-container>div {
    cursor: pointer;
    margin-top: 10px;
    margin-right: 10px;
    border-radius: 4px;
    padding: 8px;
    border: 2px solid #e5e5e5;
}

.style-container>div:nth-child(3n) {
    margin-right: 0px;
}

.style-container .style-active {
    border: 2px solid var(--el-color-primary);
}

.component-title {
    display: flex;
    align-items: center;
    height: 20px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #FFFFFF;
    line-height: 16px;
    text-align: left;
    font-style: normal;
    text-transform: none;
}

.groupOption{
    color:black
}
.groupOption:hover{
    color:black
}
</style>
